import React from "react"
import { Icon as LegacyIcon } from '@ant-design/compatible';
import { Divider, Popconfirm, Popover, Tooltip, Tag } from "antd";
import {HOST} from "project-config"
import statusRender from "../../status"

const orderStatus = [
  {text: '未支付', value: 'un_pay'},
  {text: '正在支付', value: 'paying'},
  {text: '已取消', value: 'cancel'},
  {text: '已支付', value: 'paid'},
  {text: '超时', value: 'time_out'},
]


const columns = ({toDownload, onView}) => [
  {
    title: '服装编码',
    dataIndex: 'clothingCode',
    key: 'clothingCode',
    width: 200,
    render: (i, row) => {
      return <a onClick={() => onView(row)}>{i}</a>
    }
  }, {
    title: '文件类型',
    dataIndex: 'fileType',
    width: 120,
    key: 'fileType',
    render: (f) => {
      if (f === 'BOKE') {
        return <Tag color={'#FF9800'}>BOKE</Tag>
      }
      if (f === 'PLT') {
        return <Tag color={'#4CAF50'}>PLT</Tag>
      }
      return <Tag>未知</Tag>
    }
  }, {
    title: '尺码',
    dataIndex: 'sizeName',
    width: 150,
    key: 'sizeName',
    render: (f) => f ? <Tag color={'#3b7bff'}>{f}</Tag> : '--'
  }, {
    title: '图片',
    dataIndex: 'pictureIds',
    key: 'pictureIds',
    render: (d) => {
      return (
        <div className={'favorite-thumb'}>
          {
            (d || []).map(p =>
              <Popover overlayClassName={'favorite-img-box'}
                       content={<div><img src={`${HOST}/file/image/${p}`}/></div>}>
                <img src={`${HOST}/file/thumb/${p}`}/>
              </Popover>
            )
          }
        </div>
      )
    }
  }, {
    title: '',
    width: 120,
    key: 'action',
    render: (a, row) => {
      return (
        <div>
          <div>
            <a onClick={() => toDownload(row)}>
              <span style={{verticalAlign: 'middle'}}>
                <LegacyIcon type={'cloud-download'}/> 下载
              </span>
            </a>
          </div>
        </div>
      );
    }
  }]

export default columns